import React, { FC, useContext } from 'react';

import { BackButton } from '@/features/BackButton';
import { innerUrls } from '@/shared/constants';
import { ModalContext } from '@/shared/context/ModalContext';
import { Modals, ProfileTabVariants } from '@/shared/interfaces';
import { usePrevRouter } from '@/shared/lib/hooks';
import { Button, ButtonVariants, Title } from '@/shared/ui';
import cn from 'classnames';
import { useRouter } from 'next/router';
import { useWindowSize } from 'usehooks-ts';

import { Data } from './Data';
import { Favourites } from './Favourites';
import { Feedback } from './Feedback';
import { Main } from './Main';
import { Purchases } from './Purchases';
import { Subscription } from './Subscription';
import cs from './Tab.module.scss';

const tabs: Record<ProfileTabVariants, FC> = {
  main: Main,
  data: Data,
  feedback: Feedback,
  purchases: Purchases,
  subscription: Subscription,
  favorites: Favourites,
};

export enum TabsTitles {
  main = 'Профиль',
  data = 'Данные для входа',
  feedback = 'Написать нам',
  purchases = 'Покупки',
  subscription = 'Подписка',
  favorites = 'Избранное',
}

export const Tab = ({ tab = 'main' }: { tab: ProfileTabVariants }) => {
  const { width } = useWindowSize();
  const Component = tabs[tab];
  const { openModal } = useContext(ModalContext);
  const router = useRouter();
  const prevRouter = usePrevRouter();
  const handleGoBack = () => {
    router.push(prevRouter?.asPath || innerUrls.main);
  };
  return (
    <div className={cs.with_delete}>
      <div className={cn(cs.wrapper, tab === 'subscription' && cs.no_padding)}>
        {width < 1024 && tab !== 'subscription' && (
          <BackButton
            className={cs.back}
            onClick={(e) => {
              handleGoBack();
              e.stopPropagation();
              e.preventDefault();
            }}
          />
        )}
        {tab !== 'subscription' && <Title className={cs.title} title={TabsTitles[tab]} />}
        <Component />
      </div>
      {tab === 'main' && (
        <Button
          className={cs.logout}
          data-testid="button-modal-delete_profile"
          onClick={() => openModal(Modals.DeleteProfile)}
          variant={ButtonVariants.Logout}
        >
          Удалить профиль
        </Button>
      )}
    </div>
  );
};
